<template>
  <div class="home_footer">
    <div class="display_sw3">
      <div class="home_left3">
        <span @click="isAmountModel = true">{{$store.getters.amount_model_text}}</span> 模式
        <span>
          <input type="text" @input="changeInput" :value="$store.state.multiple" />
        </span> 倍
      </div>
      <p class="home_you_fz">
        奖金：
        <!-- <b>{{$store.state.bonus_odd.star_bonus}}</b> -->
        <b>{{sumBouns(multiple,JJPrice)}}</b>
      </p>
    </div>
    <div class="display_strad">
      <div class="footer_div1">
        <i class="footer_div1_i" @click="isShowRandom = true" v-if="!isClear">
          <img src="../../assets/images/caipiao/footer01.png" alt />
        </i>
        <i class="footer_div1_i" @click="handlerClear" v-if="isClear">
          <img src="../../assets/images/empty.png" alt />
        </i>
        <div class="footer_div1_div">
          <i class="footer_div1_i1" @click="addNumber">
            <img src="../../assets/images/caipiao/footer02.png" alt />
          </i>
          <div class="touqian">
            <p>
              共
              <b class="color_red">{{total_number}}</b> 注
            </p>
            <p>
              共
              <b class="color_red">{{total_price}}</b>元
            </p>
          </div>
        </div>
      </div>
      <button class="footer_xiazhu" @click="handlerBottom">立即下注</button>
      <span  class="footer_a"  @click="xiazhulan()" >
      	<b class="circle_radius" v-if="$store.state.cart_list.length">{{$store.state.cart_list.length}}</b>
      	号码篮</span>
    </div>
    <!--底部左下角闪电下注-->
    <van-popup v-model="isShowRandom" position="bottom">
      <van-picker
        show-toolbar
        :columns="randomPicker"
        @cancel="randomCancel"
        @confirm="randomConfirm"
      />
    </van-popup>
    <!--点击模式选-元-角-分-厘  弹出-->
    <van-popup v-model="isAmountModel" position="bottom">
      <van-picker
        show-toolbar
        :columns="amountModelPicker"
        @cancel="amountModelPickerCancel"
        @confirm="amountModelPickerConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  props: {
    isClear:{
      type: Boolean,
      default: () => {
        return false
      }
    },
    total_number: {
      type: Number,
      default: () => {
        return 0;
      }
    },
    total_price: {
      type: Number,
      default: () => {
        return 0;
      }
    }
  },
  data() {
    return {
      isAmountModel: false,
      amountModelPicker: [
        { text: "元", value: 1, price: 2 },
        { text: "角", value: 2, price: 0.2 },
        { text: "分", value: 3, price: 0.02 },
        { text: "厘", value: 4, price: 0.002 }
      ],
      isShowRandom: false,
      randomPicker: [
        { text: "随机1注", value: 1 },
        { text: "随机5注", value: 5 },
        { text: "随机10注", value: 10 }
      ]
    };
  },
  computed: {
    JJPrice(){
      const wuxingstart = ["五星直选复式","五星直选单式","五星直选组合"];
      const qianzhonghou = ["前三直选复式","前三直选单式","前三直选和值","中三直选复式","中三直选单式","中三直选和值","后三直选复式","后三直选单式","后三直选和值"]
      let {bonus_odd,current_play_type} = this;
      if(wuxingstart.includes(current_play_type)){
        return bonus_odd.star_bonus
      }
      if(qianzhonghou.includes(current_play_type)){
        return bonus_odd.three_bonus
      }
      if(current_play_type == "趣味一帆风顺"){
        return bonus_odd.fun_one_bonus
      }
      if(current_play_type == "趣味好事成双"){
        return bonus_odd.fun_two_bonus
      }
      if(current_play_type == "趣味三星报喜"){
        return bonus_odd.fun_three_bonus
      }
      if(current_play_type == "趣味四季发财"){
        return bonus_odd.fun_four_bonus
      }

    },
    ...mapState(["multiple", "amount_model", "current_play_type","bonus_odd"])
  },
  methods: {
    // 奖金
    sumBouns(multiple,bouns){
      let mult = parseFloat(multiple);
      let boun = parseInt(bouns);
      let val = (mult*boun).toFixed(2);
      return val;
    },
    handlerClear(){
      this.$emit('handlerClear')
    },
    // 随机下注
    randomConfirm(val) {
      this.$emit("randomConfirm", val.value);
    },
    // 更改倍率
    changeInput(ev) {
      this.$store.commit("set_multiple", Number(ev.target.value));
    },
    amountModelPickerCancel() {
      this.isAmountModel = false;
    },
    amountModelPickerConfirm(rest, index) {
      this.$store.commit("set_amount_model", rest.value);
      this.isAmountModel = false;
    },
    // 加入号码篮
    addNumber() {
      this.$emit("addNumber");
    },
    // 立即下注
    handlerBottom() {
      if(!this.$store.state.is_bet){
        this.$toast('开奖前一分钟禁止下注');
        return
      }
      this.$emit("handlerBottom");
    },
    // 随机下注close
    randomCancel() {
      this.isShowRandom = false;
    },
    //底部的号码栏
     xiazhulan() {
      this.$router.push("/gf/xiazhulan");
    }
  }
};
</script>

<style lang="scss" scoped>
.footer_a{position: relative;}
.circle_radius{position: absolute;display: block;width: 0.5rem;height: 0.5rem;background-color:#d31d17 ; border-radius:50% ;line-height: 0.5rem;}
</style>
